<template>
   <li>
	 <label>
		<input type="checkbox" 
		:checked='todoObj.done'
		@change="handleCheck(todoObj.id)"/>
		<!--如下代码也能实现功能，但是不太推荐，因为有点违反原则，因为修改了props -->
		<!-- <input type="checkbox" 
		 v-model="todo.done
		 "/> -->
		  
		<span v-show="!todoObj.isEdit" >{{todoObj.title}}</span>
		<input 
		type="text" 
		v-show="todoObj.isEdit"
		:value='todoObj.title'
		@blur="handlerBlur(todoObj,$event)"
		ref='inputTitle'
		/>
		<!-- v-modul input空时直接修改 return不起作用 -->
	 </label>
	 <!-- style="display: none" -->
     <button 
	 class="btn btn-danger"
	 @click='deleteToDo(todoObj.id)'
	 >删除</button>
	  <button 
	 v-show="!todoObj.isEdit" 
	 class="btn btn-edit"
	 @click='editToDo(todoObj)'
	 >编辑</button>
	</li>
</template>

<script>
export default {
 name:'Item',
//  声明接收todo、checkTodo、
 props:['todoObj'],
  
 methods: {
    handleCheck(id){
      console.log(id);
    // 通知App组件将对应的todo对象的done值取反
    //  this.checkTodo(id) //props
	 this.$bus.$emit('checkTodo',id)
    },
	// 删除
    deleteToDo(id){
		if (confirm('确定要删除吗？')) {
	  this.$bus.$emit('deleteTodo',id)
			// 通知App组件将此id的todo删除
		}
   }, //编辑
    editToDo(todoObj){
		// "isEdit" in todoObj   //自己没有,会在原型上找
		// todoObj['isEdit]      //只在自身找
		// todoObj.hasOwnProperty('isEdit')   //只在自身找
		// Object.hasOwn(todoObj,"isEdit")    //只在自身找
	  todoObj["isEdit"] ? todoObj.isEdit = true : this.$set(todoObj,'isEdit',true)
	 this.$nextTick(function() {
	 this.$refs.inputTitle.focus()
	  })  
   },
    handlerBlur(todoObj,e){
     todoObj.isEdit= false
     if(!e.target.value.trim()) return alert("输入不能为空") 
	 this.$bus.$emit("updateTodo",todoObj.id,e.target.value)
   }
   
 },created() {
	  this.todoObj.isEdit = false
	 
 },
  
   
	  
  
	  
  
  
}
</script>

<style scoped>
/* Item */
li {
	list-style: none;
	height: 36px;
	line-height: 36px;
	padding: 0 5px;
	border-bottom: 1px solid #ddd;
}
li label {
	float: left;
	cursor: pointer;
}
li label li input {
	vertical-align: middle;
	margin-right: 6px;
	position: relative;
	top: 2px;
}
li button {
	float: right;
	display: none;
	margin-top: 3px;
}
li:before {
	content: initial;
}
li:last-child {
	border-bottom: none;
}
li:hover {
	background-color: #ddd;
}
li:hover button {
	display: block;
}

</style>